<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.css">
    <style media="screen">
        /* 图片轮播CSS */

        .goodsPhotoBox {
            width: 100%;
            height: 375px;
            overflow: hidden;
            position: relative;
        }

        .goodsPhotoBox img {
            width: 100%;
            height: 375px;
        }

        .goodsPhoto {
            width: 100%;
            height: 100%;
        }

        .photoNumBox {
            width: 43px;
            height: 23px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 11.5px;
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-family: PingFangSC-Regular;
            font-size: 15px;
            color: #FFFFFF;
            text-align: center;
            font-weight: 400;
        }
        /* 图片轮播CSS */

        .back {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            display: flex;
            position: absolute;
            top: 25px;
            justify-content: space-between;
            z-index: 99;
        }

        .back .back_l {
            width: 30px;
            height: 30px;
            background: url(../../image/detais_back_icon.png) no-repeat;
            background-size: 100% 100%;
            z-index: 99;
        }

        .back .back_r {
            width: 30px;
            height: 30px;
            background: url(../../image/more_icon.png) no-repeat;
            background-size: 100% 100%;
        }

        .back .back_l img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .goods_info {
            width: 100%;
            padding: 15px 15px;
            background-color: #fff;
            box-sizing: border-box;
            overflow: hidden;
        }

        .goods_name {
            width: 100%;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 23px;
        }

        .goods_name span {
            display: inline-block;
            width: 25px;
            height: 12px;
            /*float: left;*/
        }

        .buy_person {
            width: 100%;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            line-height: 14px;
            margin-top: 10px;
        }

        .goods_price {
            width: 100%;
            overflow: hidden;
            margin-top: 13.5px;
            display: flex;
            justify-content: space-between;
        }

        .goods_price_l {
            width: 100%;
            height: 20px;
            display: flex;
        }

        .goods_price_l span.symbol {
            width: auto;
            height: 15px;
            font-size: 12px;
            font-family: PingFang SC;
            color: #FF4242;
            line-height: 18px;
            font-weight: bolder;
        }

        .goods_price_l span.amount {
            width: auto;
            height: 15px;
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
            line-height: 15px;
            font-weight: bolder;
        }

        .goods_price_l span.discount_after {
            width: auto;
            height: 15px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            margin-left: 5px;
            line-height: 18px;
        }

        .goods_price_l a.old_price {
            width: auto;
            height: 15px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 18px;
            text-decoration: line-through;
        }

        .goods_price_r {
            width: auto;
            height: 15px;
            display: flex;
        }

        .goods_price_r div {
            width: 50px;
            height: 15px;
            border-radius: 2.5px;
            text-align: center;
            line-height: 15px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }

        .goods_price_r div:first-child {
            background: linear-gradient(-90deg, #FC3653, #F87721);
        }

        .goods_price_r div:last-child {
            background: linear-gradient(-90deg, #7619EC, #A429F3);
            margin-left: 5px;
        }

        .goods_info .upgrade {
            width: 100%;
            height: 30px;
            background: #FFF2CF;
            border-radius: 2.5px;
            margin-top: 20.5px;
            position: relative;
        }

        .goods_info .upgrade .text {
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            box-sizing: border-box;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #593A0F;
        }

        .goods_info .upgrade .operation {
            width: auto;
            height: 20px;
            padding: 0 5px;
            display: flex;
            background: #000000;
            opacity: 0.6;
            border-radius: 9.5px;
            position: absolute;
            right: 5px;
            top: 5px;
        }

        .goods_info .upgrade .operation span:first-child {
            width: 13.5px;
            height: 12px;
            margin-top: 4px;
            background: url(../../image/vip_icon.png) no-repeat;
            background-size: 100% 100%;
        }

        .goods_info .upgrade .operation span:last-child {
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            margin-left: 4px;
        }

        .goods_info .goods_coupons {
            width: 100%;
            height: 60px;
            margin-top: 10px;
            background: url(../../image/goods_coupons.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
        }

        .goods_info .goods_coupons .goods_coupons_l {
            display: flex;
            height: 17px;
            margin-top: 21.5px;
            margin-left: 33px;
        }

        .goods_info .goods_coupons .goods_coupons_l span {
            width: auto;
            height: 17px;
            line-height: 17px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }

        .goods_info .goods_coupons .goods_coupons_l span:last-child {
            width: auto;
            height: 17px;
            line-height: 18px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
        }

        .goods_info .goods_coupons .goods_coupons_c {
            margin-left: 20px;
        }

        .goods_info .goods_coupons .goods_coupons_c span:first-child {
            width: auto;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 13px;
            margin-top: 10px;
            display: block;
            text-align: center;
        }

        .goods_info .goods_coupons .goods_coupons_c span:last-child {
            width: 106px;
            height: 20px;
            /*background: #FDF6F6;*/
            /*opacity: 0.2;*/
            border-radius: 10px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            line-height: 20px;
            margin-top: 7.5px;
            display: block;
            text-align: center;
        }

        .goods_info .goods_coupons .goods_coupons_line {
            width: 0.5px;
            height: 45px;
            /*border: 1px solid #FFFFFF;*/
            margin-top: 7.5px;
            background-color: #fff;
            opacity: 0.5;
            margin-left: 36px;
        }

        .goods_info .goods_coupons .goods_coupons_r {
            width: 100%;
            flex: 1;
            height: 60px;
            line-height: 60px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FDF6F6;
            text-align: center;
        }

        .goods_info .recommend {
            width: 100%;
            overflow: hidden;
            margin-top: 15px;
        }

        .goods_info .recommend p {
            width: 100%;
            padding: 0 5px;
            box-sizing: border-box;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
            overflow: hidden;
        }

        .goods_info .recommend p:first-child {
            margin-top: 30px;
        }

        .goods_info .recommend>.text {
            width: 70px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            background-color: #FF4242;
            border-bottom-right-radius: 10px;
        }

        .store_name {
            width: 100%;
            padding: 15px 15px;
            background-color: #fff;
            box-sizing: border-box;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .store_name .store_picture {
            width: 45px;
            height: 45px;
            /*border: 1px solid red;*/
        }

        .store_name .store_picture img {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }

        .store_name .store_info {
            margin-left: 10px;
        }

        .store_name .store_info>.name {
            width: auto;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #000000;
            line-height: 13px;
        }

        .store_name .store_info>.icon {
            width: 56px;
            height: 8px;
            margin-top: 7px;
        }

        .store_name .store_info>.icon img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .store_name .store_info p:last-child {
            width: auto;
            height: 11px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            text-decoration: underline;
            color: #FF4242;
            line-height: 11px;
            margin-top: 6px;
        }

        .store_name .store_r {
            width: auto;
            margin-left: auto;
            display: flex;
            justify-content: space-between;
        }

        .store_name .store_r span:first-child {
            width: 80px;
            height: 20px;
            background: linear-gradient(-90deg, #FC3653, #F87721);
            border-radius: 10px;
            line-height: 20px;
            text-align: center;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            margin-top: 12.5px;
        }

        .store_name .store_r span:last-child {
            width: 9px;
            height: 13px;
            margin-left: 5px;
            margin-top: 16px;
        }

        .store_name .store_r span:last-child img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .evaluation {
            width: 100%;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            padding-bottom: 15px;
            overflow: hidden;
        }

        .evaluation_l {
            width: 100%;
            overflow: hidden;
            display: flex;
        }

        .evaluation_l span {
            width: auto;
            height: 14px;
            line-height: 14px;
        }

        .evaluation_l span:first-child {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }

        .evaluation_l span:last-child {
            width: 14px;
            height: 14px;
            background: #FF4242;
            border-radius: 50%;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #fff;
            margin-left: 4.5px;
            text-align: center;
        }

        .related_recommend {
            width: 100%;
            padding: 15px 15px;
            background-color: #fff;
            margin-top: 10px;
            overflow: hidden;
        }

        .related_recommend .title {
            width: auto;
            height: 17px;
            font-size: 17px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 17px;
        }

        .related_recommend>.content {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .related_recommend>.content div.item {
            flex: 1;
            width: 100px;
            height: 100%;
            padding: 5px;
            box-sizing: border-box;
            background: #F1F0F5;
            margin-left: 3px;
        }

        .related_recommend>.content div.item:first-child {
            margin-left: 0px;
        }

        .related_recommend>.content div.item .goods_picture {
            width: 100%;
            height: 100px;
            /*background-color: blue;*/
        }

        .related_recommend>.content div.item .goods_picture img {
            width: 100%;
            height: 100%;
            display: block;
            /*background-color: blue;*/
        }

        .related_recommend>.content div.item .goods_name {
            width: 100%;
            height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #444444;
            line-height: 13px;
            margin-top: 6.5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }

        .related_recommend>.content div.item .coupon {
            display: flex;
            margin-top: 5px;
        }

        .related_recommend>.content div.item .coupon .coupon_l {
            width: 37px;
            height: 15px;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #fff;
            background: #FF4242;
            border-radius: 2.5px;
        }

        .related_recommend>.content div.item .coupon .coupon_r {
            width: 51px;
            height: 15px;
            background: url(../../image/arebuyingcoupon_bg.png) no-repeat;
            background-size: 100% 100%;
            line-height: 15px;
            font-size: 10px;
            text-align: center;
            color: #FF4242;
        }

        .related_recommend>.content div.item .goods_price {
            display: flex;
            margin-top: 6.5px;
        }

        .related_recommend>.content div.item .goods_price a:first-child {
            width: auto;
            height: 13px;
            line-height: 13px;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
        }

        .related_recommend>.content div.item .goods_price a:last-child {
            width: auto;
            height: 11px;
            line-height: 12px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            text-decoration: line-through;
            color: #999999;
            margin-top: 1px;
            margin-left: 4px;
        }

        .goods_big_picture {
            width: 100%;
            /*height: 880px;*/
            margin-top: 10px;
            overflow: hidden;
        }

        .goods_big_picture div {
            width: 100%;
            height: 100%;
        }

        .goods_big_picture div img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .article_recommend {
            width: 100%;
            padding: 25px 15px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .article_recommend .head {
            width: 100%;
            padding: 0 100px;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
        }

        .article_recommend .head .head_line {
            width: 20px;
            height: 1px;
            background-color: #333333;
            margin-top: 8px;
        }

        .article_recommend .head .head_text {
            width: auto;
            height: 17px;
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 17px;
        }

        .content {
            width: 100%;
            overflow: hidden;
        }

        .content ul {
            width: 100%;
            margin-top: 5px;
            overflow: hidden;
        }

        .content ul li {
            width: 49%;
            background-color: #fff;
            padding: 5px;
            float: left;
            margin-left: 2%;
            margin-top: 10px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .content ul li:nth-child(2n+1) {
            margin-left: 0;
        }

        .content ul li>.goods_picture {
            width: 100%;
            height: 155px;
            background-color: red;
        }

        .content ul li>.goods_picture img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .content ul li>.intro {
            width: 100%;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 23px;
        }

        .content ul li>.intro div {}

        .content ul li>.intro span {
            display: inline-block;
            width: 23px;
            height: 23px;
            float: left;
        }

        .content ul li>.intro span img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .content ul li>.price {
            width: 100%;
            overflow: hidden;
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
        }

        .content ul li>.price .price_item {
            display: flex;
            width: auto;
        }

        .content ul li>.price .price_item:last-child {
            height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 15px;
        }

        .content ul li>.price .price_item span:nth-child(1) {
            width: auto;
            height: 15px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 17px;
        }

        .content ul li>.price .price_item span:nth-child(2) {
            width: auto;
            height: 15px;
            font-size: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
            line-height: 17px;
        }

        .content ul li>.price .price_item span:nth-child(3) {
            width: auto;
            height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF4242;
            line-height: 15px;
        }

        .aui-bar-nav {
            /*padding: 0 11px 0 13px;
        box-sizing: border-box;*/
            top: 0;
            line-height: 2.25rem;
            background-color: #fff;
            color: #ffffff;
            border: none;
            background-size: 100% 1px;
            background-repeat: no-repeat;
            background-position: bottom;
            background-image: linear-gradient(0, #EEEEEE, #EEEEEE 50%, transparent 50%);
            background-image: -webkit-linear-gradient(90deg, #EEEEEE, #EEEEEE 50%, transparent 50%);
        }

        .aui-bar-nav .aui-btn .aui-iconfont {
            font-size: 0.9rem;
            line-height: 1.25rem;
            padding: 0;
            margin: 0;
            color: #000000;
        }

        .aui-bar-nav .aui-title {
            min-height: 2.25rem;
            position: absolute;
            margin: 0;
            text-align: center;
            white-space: nowrap;
            right: 5rem;
            left: 5rem;
            width: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 2;
            color: #333333;
            font-size: 17px;
            font-weight: bolder;
        }

        .aui-btn span {
            width: 22px;
            height: 22px;
        }

        .aui-btn span img {
            width: 22px;
            height: 22px;
        }

        .aui-bar-nav .aui-pull-right {
            padding: 0 11px;
            font-size: 0.8rem;
            font-weight: 400;
            z-index: 2;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
        }

        button,
        .aui-btn {
            position: relative;
            display: inline-block;
            font-size: 0.7rem;
            font-weight: 400;
            font-family: inherit;
            text-decoration: none;
            text-align: center;
            margin: 0;
            background: #EEEEEE;
            padding: 0 15px!important;
            height: 1.5rem;
            line-height: 1.5rem;
            border-radius: 0.2rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-user-select: none;
            user-select: none;
        }

        .aui-pull-right {
            font-size: 15px;
            color: #222222!important;
            text-align: right;
        }

        [v-cloak] {
            display: none!important;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <!-- <header class="aui-bar aui-bar-nav" id="header">
          <a class="aui-pull-left aui-btn" tapmode @click="closeWin()">
              <span>
                 <img src="../../image/back_arrow.png" alt="">
              </span>
          </a>
          <div class="aui-title">商品详情</div>
      </header> -->
        <div class="goodsPhotoBox">
            <div class="back">
                <div class="back_l" @click='closeF()'></div>
                <div class="back_r"></div>
            </div>
            <div class="swiper-container swiper" style="position:relative;z-index:0">
                <div class="swiper-wrapper">
                    <!-- 图片轮播 -->
                    <div class="goodsPhotoBox bg-dark swiper-slide" v-for="(banner,b) in newImgArr">
                        <img class="goodsPhoto" :src="banner" />
                    </div>
                </div>
                <div class="aui-slide-page-wrap" style="visibility:hidden;"></div>
            </div>
            <div v-if="newImgArr.length" class="photoNumBox">{{ banner_index }}/<span style="font-size: 11px;">{{ newImgArr.length }}</span></div>
        </div>


        <div class="goods_info">
            <div class="goods_name">
                <span v-if='goods_info.shopType==1'><img src="../../image/tm.png" alt=""></span>
                <span v-else><img src="../../image/tb_search.png" alt=""></span>
                <!-- <span class="icon"></span> -->
                {{goods_info.title}}
            </div>
            <div class="buy_person">{{goods_info.monthSales}}人已购买</div>
            <div class="goods_price">
                <div class="goods_price_l">
                    <span class="symbol">￥</span>
                    <span class="amount">{{goods_info.actualPrice}}</span>
                    <span class="discount_after">原价</span>
                    <a class="old_price">{{goods_info.originalPrice}}</a>
                </div>
                <!-- <div class="goods_price_r">
                    <div>补0.5元</div>
                    <div>返4.3元</div>
                </div> -->
            </div>

            <!-- <div class="upgrade">
                <div class="text">现在升级成为运营总监，立即赚1.61元</div>
                <div class="operation">
                    <span class="icon"></span>
                    <span>立即升级</span>
                </div>
            </div> -->

            <div class="goods_coupons" v-if='goods_info.couponPrice!=0'>
                <div class="goods_coupons_l">
                    <span>{{goods_info.couponPrice}}</span>
                    <span>元</span>
                </div>
                <div class="goods_coupons_c">
                    <span>平台专享优惠券</span>
                    <span>{{goods_info.couponEndTime}}过期</span>
                </div>
                <div class="goods_coupons_line"></div>
                <div class="goods_coupons_r" @click='GetCoupon()'>领取</div>
            </div>

            <div class="recommend">
                <div class="text">小编推荐</div>
                <p style="margin-top:13.5px;">{{goods_info.desc}} </p>
                <!-- <p>优势：【米多奇深刻洞察中国国民生活与饮食习惯，积极倡导休闲食品不断】创新、并致力于研发出更加有益于身体健康的休闲食品。米多奇拥有国内实力休闲食品研发团队，致力于探索在休闲食品领域中。</p>
                <p>优惠：领券平台专享20元券，到手25.9元</p> -->
            </div>
        </div>

        <div class="store_name">
            <div class="store_picture"><img :src="goods_info.shopLogo" alt=""></div>
            <div class="store_info">
                <p class="name">{{goods_info.shopName}}</p>
                <p class="icon"><img src="../../image/store_tm_icon.png" alt=""></p>
                <p v-if='goods_info.searchSource==1'>进店逛逛</p>
            </div>
            <div class="store_r">
                <span v-if='goods_info.searchSource==1'>店铺全部优惠</span>
                <span><img src="../../image/arrow_right.png" alt=""></span>
            </div>
        </div>
        <div class="evaluation" v-if='goods_info.id!=-1'>
            <div class="evaluation_l">
                <span>宝贝描述{{goods_info.descScore}}</span>
                <span v-if='goods_info.descScore>=4.8'>高</span>
                <span v-else>低</span>
            </div>
            <div class="evaluation_l">
                <span>卖家服务{{goods_info.serviceScore}}</span>
                <span v-if='goods_info.serviceScore>=4.8'>高</span>
                <span v-else>低</span>
            </div>
            <div class="evaluation_l">
                <span>物流服务{{goods_info.shipScore}}</span>
                <span v-if='goods_info.shipScore>=4.8'>高</span>
                <span v-else>低</span>
            </div>
        </div>


        <div class="related_recommend">
            <div class="title">相关推荐</div>
            <div class="content">
                <div class="swiper-container swiper5">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for='(item,index) in goodsVOList' @click='openGoodsDtailsPage(item.goodsId,index)'>
                            <div class="item">
                                <div class="goods_picture"><img :src="item.mainPic" alt=""></div>
                                <div class="goods_name">{{item.dtitle}}</div>
                                <div class="goods_price">
                                    <a>¥{{item.actualPrice}}</a>
                                    <a>¥{{item.originalPrice}}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="item">
                    <div class="goods_picture"></div>
                    <div class="goods_name">特价海尔微波炉烤...</div>
                    <div class="goods_price">
                        <a>¥399</a>
                        <a></a>
                    </div>
                </div>
                <div class="item">
                    <div class="goods_picture"></div>
                    <div class="goods_name">特价海尔微波炉烤...</div>
                    <div class="goods_price">
                        <a>¥399</a>
                        <a></a>
                    </div>
                </div>
                <div class="item">
                    <div class="goods_picture"></div>
                    <div class="goods_name">特价海尔微波炉烤...</div>
                    <div class="goods_price">
                        <a>¥399</a>
                        <a></a>
                    </div>
                </div> -->
            </div>
        </div>


        <div class="goods_big_picture">
            <div v-for='item in goods_info.detailPics'><img :src="item" alt=""></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script src="../../script/swiper.js" charset="utf-8"></script>
<script type="text/javascript">
    apiready = function() {
        vm.initBannerActive();
        vm.init(api.pageParam.id);
        console.log(cl.mid);
    }
    var vm = new Vue({
        el: '#app',
        data: {
            goods_info: '',
            banner_index: 1,
            newImgArr: [],
            goodsVOList: ''
        },
        methods: {
            GetCoupon: function() {
                api.ajax({
                    url: cl.apiServer + 'tb/getPrivilegeLink',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: cl.userToken
                    },
                    data: {
                        body: {
                            goodsId: api.pageParam.id,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        // console.log(JSON.stringify(ret));
                        if (ret.code == 0) {
                            cl.openWin({
                                name: '../../brower_',
                                pageParam: {
                                    link: ret.data.couponClickUrl,
                                    type: 1
                                }
                            });
                        }
                    }
                });
            },
            init: function(id) {
                api.ajax({
                    url: cl.apiServer + 'tb/getGoodsDetails',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token: cl.userToken
                    },
                    data: {
                        body: {
                            goodsId: id,
                            mid: cl.mid,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    console.log('商品详情' + JSON.stringify(ret))
                    if (ret) {
                        if (ret.code == 0) {
                            vm.goods_info = ret.data.GoodsDetailsVO;
                            vm.goodsVOList = ret.data.goodsVOList;
                            vm.newImgArr = ret.data.GoodsDetailsVO.imgs;
                            setTimeout(function() {
                                var swiper = new Swiper('.swiper5', {
                                    slidesPerView: 3,
                                    autoplay: {
                                        delay: 3000,
                                        disableOnInteraction: false,
                                        waitForTransition: true,
                                    },
                                    freeMode: false,
                                    touchRatio: 1,
                                    observeParents: true,
                                    observer: true,
                                    loop: true,
                                });
                            }, 10)
                        }
                    }
                })
            },
            openGoodsDtailsPage: function(id, i) {
                api.openWin({
                    name: 'goods_deatils_' + id,
                    url: './goods_deatils_.html',
                    pageParam: {
                        id: id
                    }
                });

                // alert(111)
                // cl.openWin({
                //     name: 'goods_deatils_'+i,
                //     pageParam: {
                //         id: id
                //     }
                // })
            },
            /**
             * [下标]
             * @param  {[type]} index [description]
             * @return {[type]}       [description]
             */
            currentFun: function(index) {
                vm.banner_index = index + 1;
            },
            initBannerActive: function() {
                setTimeout(function() {
                    var swiper = new Swiper('.swiper', {
                        // slidesPerView: 5,
                        // spaceBetween: 20,
                        autoplay: true,
                        freeMode: false,
                        touchRatio: 1,
                        observeParents: true,
                        observer: true,
                        loop: false,
                        autoplay: {
                            disableOnInteraction: false,
                        },
                        on: {
                            slideChangeTransitionStart: function() {
                                //可以读取到当前活动的下班标
                                var num = this.activeIndex;
                                vm.currentFun(num);
                            },
                        }
                    });
                }, 0)
            },
            closeF: function() {
                cl.closeWin({
                    name: 'goods_deatils'
                });
                api.sendEvent({
                    name: 'backpage'
                });
            }
        }
    });
</script>

</html>
